<template>
    <!-- 新品上线盒子 -->
  <div class="newGoodses">
     <h2>新品上线</h2>
     <div class="newGoodses-box">
        <div class="item" v-for="(item, index) in datas.newGoodses" :key="index">
           <img v-imageerror="defaultImg" :src="item.goodsCoverImg" alt="">
           <p class="goodsName">{{ item.goodsName }} 我靠，人都要死了</p>
           <p class="goodsIntro">{{ item.goodsIntro }}</p>
           <p class="sellingPrice">{{ item.sellingPrice }}</p>
        </div>
     </div>
  </div>

  <!-- 为你推荐盒子 -->
  <div class="recommendGoodses">  
    <div class="recommendGoodses-top">
      <h2>为你推荐</h2>
      <a href="##">查看更多>>></a>
    </div>
    <div class="recommendGoodses-box">
       <div class="item" v-for="(item, index) in datas.recommendGoodses" :key="index">
           <div class="xxx">真是醉了</div>
           <img v-imageerror="defaultImg" :src="item.goodsCoverImg" alt="">
           <p class="name">{{ item.goodsName }}</p>
           <p class="sellingPrice">{{ item.sellingPrice }}</p>
           <p class="counter">猜你喜欢</p>
           <div class="ssss">
              <p class="zzzz">新蜂精选</p>
              <p class="zzzz">好像也可以不贵</p>
           </div>
       </div>
    </div>
  </div>
</template>

<script setup>
   import axios from 'axios'
   import { onMounted, ref } from 'vue'
   import defaultImg from '@/image/bigUserHeader.png'
   const datas = ref([])
   async function getList() {
     const {data} = await axios.get('/api/homeinfo')
     datas.value = data.data
     console.log(data.data);
   }
   onMounted(() => {
    getList()
   })
</script>

<style lang="scss" scoped>
a{
    text-decoration: none;
    color: black;
}
.newGoodses{
  width: 1226px;
  height: 398px;
  margin-top: 20px;
  h2{
    height: 58px;
    line-height: 58px;
    margin: 0;
  }
  .newGoodses-box{
    width: 1226px;
    height: 353px;
    display: flex;
    justify-content: space-between;
    .item{
       width: 234px;
       height: 353px;
       background-color: #e2f6f698;
       img{
        width: 160px;
        height: 160px;
        margin: 37px;
        opacity: 0.8;
       }
       img:hover{
        opacity: 1;
       }
       .goodsName{
         font-size: 14px;
         text-align: center;
       }
       .goodsIntro{
        font-size: 8px;
        color: gray;
        text-align: center;
        height: 16px;
        line-height: 16px;
       }
       .sellingPrice{
        color: #1baeae;
        text-align: center;
        font-size: 14px;
       }
    }
  }
}
.recommendGoodses{
    width: 1226px;
    height: 735px;
    background-color: rgb(248, 243, 243);
    margin-top: 30px;
    .recommendGoodses-top{
        display: flex;
        justify-content: space-between;
      h2{
         height: 58px;
         line-height: 58px;
         margin: 0;
      }
      a{
        height: 58px;
        line-height: 58px;
        margin-right: 20px;
      }
    }
    .recommendGoodses-box{
        width: 1226px;
        height: 654px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 4px;
        box-sizing: border-box;
        .item{
            overflow: hidden;
            width: 234px;
            height: 314px;
            background-color: #fff;
            margin-bottom: 25px;
            position: relative;
            .xxx{
                width: 104px;
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                color: white;
                background-color: red;
                text-align: center;
                margin: 0 auto;
            }
            img{
                width: 160px;
                height: 160px;
                margin: 10px auto;
                margin-left: 35px;
            }
            .name{
                font-size: 14px;
                text-align: center;
            }
            .sellingPrice{
                font-size: 14px;
                text-align: center;
                color: #1baeae;
            }
            .counter{
                font-size: 14px;
                text-align: center;
                color: grey;
                font-size: 10px;
            }
            .ssss{
              position: absolute;
              bottom: -70px;
              left: 0;
              right: 0;
              width: 100%;
              height: 70px;
              background-color: #1baeae;
              opacity: 0;
              .zzzz{
                font-size: 10px;
                color: #fff;
                margin-left: 25px;
              }
            }
        }
        .item:hover .ssss{
            opacity: 1;
            transform: translateY(-70px);
            transition: all 0.5s;
         }
         .item:hover{
            box-shadow: 0px 5px 20px gray;
         }
    }
}
</style>